<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 登录的头部 -->
      <div class="avatar_box">
        <img src="../assets/logo.png"/>
      </div>
      <!-- 登录表单 -->
      <!-- :model是自定义组件的一个属性，不是v-model -->
      <el-form ref="form" :rules="rulesForm" :model="user" class="login_form">
        <el-form-item prop="username">
          <el-input v-model="user.username" prefix-icon="user"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.password" prefix-icon="lock" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入验证码" v-model="user.code" style="width: 250px;"></el-input>
          <img :src="imgData" @click="getAuthCode" alt="验证码" style="width: 100px;">
        </el-form-item>
        <div class="btns">
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup name="Login">
import {useRouter} from 'vue-router'
import {ref, inject} from 'vue'
import axios from "@admin/utils/request.js";

let $message = inject('$message');
const router = useRouter()

const form = ref();
const user = ref({
  username: 'lc123',
  password: 'lJsO123',
  code: ''
});

const rulesForm = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
  ]
});

// 重置 form 表单
const resetForm = function () {
  form.value.resetFields()
};

// 提交数据
let login = function () {
  if (user.value.username === '') {
    $message.error('用户名不能为空')
  } else if (user.value.password === '') {
    $message.error('密码不能为空')
  } else {
    console.log(captchaUUID)
    axios.post("/user/login", user.value, {headers: {"X-Captcha-UUID": captchaUUID + "-" + user.value.code}}).then(response => {
      console.log(response)
      localStorage.setItem("token", response.data);
      $message.success("登录成功")
      router.push('/home');
    })
  }
}

let imgData = ref('');
let captchaUUID = '';
// 获取真人验证码
function getAuthCode() {
  axios.get(`/user/getCaptcha`, {responseType: 'blob'}).then(response => {
      console.log(response.headers['x-captcha-uuid'])
      // 尝试以多种方式读取响应头，以适应不同的大小写规则
      imgData.value = URL.createObjectURL(response.data);
      captchaUUID = response.headers['x-captcha-uuid']
      console.log('Captcha UUID:', captchaUUID);
  })
}
getAuthCode()

</script>

<style scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 400px;
  height: 250px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.avatar_box {
  height: 80px;
  width: 80px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.avatar_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
